<template>
  <div class="tiku">
    <a-card style="text-align: left; background-color: #ffffff" title="题库">
      <template #extra>
        <a-link>查看更多</a-link>
      </template>
      <a-row
        v-for="i in [0, 1, 2, 3]"
        :gutter="20"
        :style="{ marginBottom: '20px' }"
        :key="i"
      >
        <a-col v-for="j in [0, 1, 2, 3]" :key="j" :span="6">
          <a-card
            id="mycard"
            :bordered="true"
            hoverable
            @click="handleToQuestion(data[i * 4 + j]?.id)"
          >
            <a-row style="background-color: #838493; width: 100%">
              <img :src="data[i * 4 + j]?.picture" width="50px" />
            </a-row>
            <a-typography-title :heading="5">
              {{ data[i * 4 + j]?.title }}
            </a-typography-title>
            <a-typography-title :heading="7">
              {{ getDescription(i * 4 + j) }}
            </a-typography-title>
          </a-card>
        </a-col>
      </a-row>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import {
  QuestionBank,
  QuestionBankControllerService,
  QuestionBankQuestionControllerService,
} from "../../../generated";
import { useRouter } from "vue-router";

const pageSize = ref(16);
const router = useRouter();
let data = ref<Array<QuestionBank>>([]);

async function questionBankInit() {
  await QuestionBankControllerService.listQuestionBankVoByPageUsingPost({
    pageSize: pageSize.value,
  }).then((res) => {
    data.value = res.data.records;
  });
}

const getDescription = (idx) => {
  return data.value[idx]?.description.length < 25
    ? data.value[idx]?.description
    : data.value[idx]?.description.substring(0, 25) + "....";
};

function handleToQuestion(id: string) {
  console.log("点击来到详细题库界面==>", id);
  router.push({ path: "/timuDetail", query: { id: id } });
}

onMounted(() => {
  questionBankInit();
});
</script>

<style scoped>
.tiku {
  text-align: center;
  margin: 0px 150px 0px 150px;
}
#mycard {
  cursor: pointer;
}
</style>
